<template>
  <div class="home flex-center">
    <!-- <img class="bg-img" src="@/assets/home_bg.svg" /> -->
    <div class="bg-chart-wrapper">
      <BgChart />
    </div>
    <div class="divide" :style="isNavShowModal ? { height: '300px' } : {}"></div>
    <img class="logo" src="@/assets/logo.svg">
    <span class="title">管理系统</span>
    <br>
    <div class="logo-wrapper">
      <img src="@/assets/neo4j-logo.svg">
    </div>
  </div>
</template>

<script>
import { BgChart } from '@/components/home'
import { mapGetters } from 'vuex'

export default {
  name: 'home',
  components: {
    BgChart
  },
  computed: {
    ...mapGetters([
      'isNavShowModal'
    ])
  }
}
</script>

<style lang="stylus" scoped>
.home
  position relative
  width: 100%
  height: calc(100% - 60px)
  overflow: hidden
  background-color: rgba(238, 241, 246, .6)
  flex-wrap: wrap
  align-items: flex-end
  align-content: flex-start
  background-image: url(../assets/home_bg.svg)
  background-position: center
.bg-chart-wrapper
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%
  background-color: #f1f1f1
  opacity .4
.bg-img
  position absolute
  z-index: 10
.logo
  position relative
  z-index: 30
  width: 250px
.title
  position relative
  z-index: 30
  font-size: 50px
  color: #000
  font-weight: 700
  margin-left: 10px
.logo-wrapper
  width: 100%
  position relative
  z-index 30
  img
    width: 200px
    margin: 55px 0px
    animation 'Rotate' 50s linear 0s infinite
.divide
  transition: all .3s
  width: 100%
  height: 100px
</style>
